CSS правило @property: Освобождаване на силата на дефинирането на типове на персонализирани свойства

Светът на CSS непрекъснато се развива и едно от по-новите и мощни допълнения е правилото @property. Това правило предоставя механизъм за дефиниране на типове на потребителски свойства, като носи по-голям контрол и гъвкавост във вашия CSS и отваря врати към по-сложни анимации, подобрени възможности за теми и по-стабилна цялостна CSS архитектура. Тази статия ще се задълбочи в правилото @property, изследвайки неговия синтаксис, възможности и практически приложения, като през цялото време ще се има предвид глобалната аудитория.

Какво са потребителските свойства на CSS (променливи)?

Преди да се потопим в правилото @property, е важно да разберем потребителските свойства на CSS, известни още като CSS променливи. Потребителските свойства ви позволяват да дефинирате стойности за многократна употреба във вашия CSS, което прави вашите стилови таблици по-лесни за поддръжка и актуализиране. Те се декларират с помощта на синтаксиса --variable-name и се достъпват с помощта на функцията var().

Пример:

:root {
  --primary-color: #007bff; /* Глобално дефиниран основен цвят */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

В този пример --primary-color и --secondary-color са потребителски свойства. Ако трябва да промените основния цвят в целия си уебсайт, трябва да го актуализирате само на едно място – в селектора :root.

Ограничението на основните потребителски свойства

Въпреки че потребителските свойства са изключително полезни, те имат значително ограничение: по същество се третират като низове. Това означава, че CSS не знае по своята същност какъв тип стойност съдържа дадено потребителско свойство (напр. число, цвят, дължина). Въпреки че браузърът се опитва да изведе типа, това може да доведе до неочаквано поведение, особено когато става въпрос за анимации и преходи. Например, опитът да се анимира потребителско свойство, което съдържа цвят, може да не работи както се очаква или да не работи последователно в различните браузъри.

Представяне на правилото @property

Правилото @property решава това ограничение, като ви позволява изрично да дефинирате типа, синтаксиса, първоначалната стойност и поведението на наследяване на потребителско свойство. Това осигурява много по-стабилен и предсказуем начин за работа с потребителски свойства, особено при тяхното анимиране или преход.

Синтаксис на правилото @property

Основният синтаксис на правилото @property е следният:

@property --property-name {
  syntax: <syntax-value>;
  inherits: <boolean>;
  initial-value: <value>;
}

Нека разгледаме всяка част от правилото:

• --property-name: Това е името на потребителското свойство, което дефинирате. То трябва да започва с две тирета (--).
• syntax: Това дефинира очаквания тип на стойността на потребителското свойство. Това е низ, който описва валидната(ите) стойност(и) за потребителското свойство. Често срещаните стойности на синтаксиса включват:
• *: Съответства на всяка стойност. Това е стойността по подразбиране, ако не е посочен синтаксис. Използвайте това внимателно, тъй като заобикаля проверката на типа.
• <color>: Съответства на всяка валидна стойност за цвят в CSS (напр. #ff0000, rgb(255, 0, 0), red).
• <length>: Съответства на всяка валидна стойност за дължина в CSS (напр. 10px, 2em, 50%).
• <number>: Съответства на всяка числова стойност (напр. 1, 3.14, -2.5).
• <integer>: Съответства на всяка цяло число (напр. 1, -5, 0).
• <angle>: Съответства на всяка стойност за ъгъл (напр. 45deg, 0.5rad, 100grad).
• <time>: Съответства на всяка стойност за време (напр. 1s, 500ms).
• <percentage>: Съответства на всяка процентна стойност (напр. 50%, 100%).
• <image>: Съответства на всяка стойност за изображение (напр. url(image.jpg), linear-gradient(...)).
• <string>: Съответства на всяка стойност от тип низ (заключена в двойни или единични кавички).
• Можете също да комбинирате синтактични дескриптори, като използвате |, за да разрешите няколко типа (напр. <length> | <percentage>).
• Можете да използвате регулярни изрази, за да дефинирате по-сложен синтаксис. Това използва общовалидните за CSS ключови думи inherit, initial, unset и revert като валидни стойности, ако синтаксисът ги посочва, дори и ако обикновено не са разрешени за типа синтаксис. Пример: '\d+px' позволява стойности като '10px', '200px', но не и '10em'. Обърнете внимание на двойното екраниране на обратната наклонена черта.
• inherits: Това е булева стойност (true или false), която показва дали потребителското свойство трябва да наследи своята стойност от родителския си елемент. Стойността по подразбиране е false.
• initial-value: Това дефинира първоначалната стойност на потребителското свойство. Това е стойността, която свойството ще има, ако не е изрично зададена на елемент. Важно е да предоставите валидна първоначална стойност, която съответства на дефинирания syntax. Ако не е предоставена първоначална стойност и свойството не се наследява, първоначалната му стойност ще бъде невалидната стойност на свойството.

Практически примери за правилото @property

Нека разгледаме някои практически примери, за да илюстрираме как правилото @property може да се използва в реални сценарии.

Пример 1: Анимиране на потребителски цвят

Анимирането на цветове с помощта на стандартни CSS преходи понякога може да бъде сложно. Правилото @property прави това много по-лесно.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Промяна към зелен цвят при посочване с мишката */
}

В този пример дефинираме потребителско свойство, наречено --brand-color, и посочваме, че неговият синтаксис е <color>. Също така задаваме първоначална стойност от #007bff (нюанс на синьото). Сега, когато върху .element се посочи с мишката, цветът на фона плавно преминава от син към зелен.

Пример 2: Анимиране на потребителска дължина

Анимирането на дължини (напр. ширина, височина) е друг често срещан случай на употреба на правилото @property.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Тук дефинираме потребителско свойство, наречено --element-width, и посочваме, че неговият синтаксис е <length>. Първоначалната стойност е зададена на 100px. Когато върху .element се посочи с мишката, неговата ширина плавно преминава от 100px на 200px.

Пример 3: Създаване на потребителска лента за напредък

Правилото @property може да се използва за създаване на потребителски ленти за напредък с повече контрол върху анимацията.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

В този пример дефинираме потребителско свойство, наречено --progress, което представлява процента на напредък. След това използваме функцията calc(), за да изчислим ширината на лентата за напредък въз основа на стойността на --progress. Като задаваме атрибута data-progress на елемента .progress-bar, можем да контролираме нивото на напредък.

Пример 4: Създаване на теми с потребителски свойства

Правилото @property подобрява създаването на теми, като осигурява по-надеждно и предсказуемо поведение при преход между различни теми. Разгледайте следния пример за просто превключване между тъмна/светла тема:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Светла тема по подразбиране */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Светла тема по подразбиране */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Тъмна тема */
    --text-color: #ffffff;
}

Чрез дефинирането на --bg-color и --text-color с правилото @property, преходът между темите ще бъде по-плавен и по-надежден в сравнение с използването на основни потребителски свойства без дефинирани типове.

Съвместимост с браузъри

Към края на 2023 г. поддръжката на правилото @property от браузърите е като цяло добра в модерните браузъри, включително Chrome, Firefox, Safari и Edge. Въпреки това, винаги е добра идея да проверявате най-новата информация за съвместимост на уебсайтове като Can I Use (caniuse.com), за да се уверите, че вашата целева аудитория има адекватна поддръжка за тази функция.

Ако трябва да поддържате по-стари браузъри, които не поддържат правилото @property, можете да използвате откриване на функции с JavaScript и да предоставите резервни решения. Например, можете да използвате JavaScript, за да откриете дали браузърът поддържа CSS.registerProperty (JavaScript API, свързан с @property) и след това да приложите алтернативни стилове, ако не се поддържа.

Най-добри практики за използване на правилото @property

Ето някои най-добри практики, които трябва да имате предвид, когато използвате правилото @property:

• Дефинирайте синтаксиса внимателно: Изберете най-подходящата стойност на синтаксиса за вашето потребителско свойство. Това ще помогне за предотвратяване на грешки и ще гарантира, че вашият CSS се държи както се очаква.
• Предоставяйте първоначални стойности: Винаги предоставяйте initial-value за вашите потребителски свойства. Това гарантира, че свойството има валидна стойност, дори ако не е изрично зададено на елемент.
• Обмислете наследяването: Помислете внимателно дали вашето потребителско свойство трябва да наследи стойността си от родителския елемент. В повечето случаи е най-добре да зададете inherits на false, освен ако нямате конкретна причина да разрешите наследяването.
• Използвайте описателни имена на свойствата: Избирайте описателни имена за вашите потребителски свойства, които ясно показват тяхното предназначение. Това ще направи вашия CSS по-четлив и лесен за поддръжка. Например, вместо --color, използвайте --primary-button-color.
• Тествайте обстойно: Тествайте вашия CSS в различни браузъри и устройства, за да се уверите, че работи както се очаква. Обърнете специално внимание на анимациите и преходите, тъй като това са областите, в които правилото @property може да има най-голямо въздействие.
• Документирайте кода си: Добавете коментари към вашия CSS, за да обясните предназначението на вашите потребителски свойства и как се използват. Това ще улесни другите разработчици (и вас самите в бъдеще) да разберат вашия код.

Съображения за достъпност

Когато използвате правилото @property, е важно да вземете предвид достъпността. Уверете се, че вашите анимации и преходи не са твърде разсейващи или дезориентиращи за потребители с когнитивни увреждания. Избягвайте използването на анимации, които мигат или пулсират, тъй като те могат да предизвикат припадъци при някои индивиди.

Също така се уверете, че изборът ви на цветове осигурява достатъчен контраст за потребители със зрителни увреждания. Можете да използвате инструменти като WebAIM Contrast Checker, за да проверите дали вашите цветови комбинации отговарят на указанията за достъпност.

Глобални съображения

При разработването на уебсайтове и приложения за глобална аудитория е важно да се вземат предвид културните различия и локализацията. Ето някои неща, които трябва да имате предвид, когато използвате правилото @property в глобален контекст:

• Посока на текста: Бъдете наясно с посоката на текста (отляво-надясно срещу отдясно-наляво), когато използвате потребителски свойства за контрол на оформлението или позиционирането. Използвайте логически свойства (напр. margin-inline-start вместо margin-left), за да гарантирате, че вашето оформление се адаптира правилно към различните посоки на текста.
• Формати на числа и дати: Имайте предвид различните формати на числа и дати, използвани в различните страни. Избягвайте твърдо кодиране на конкретни формати във вашия CSS и вместо това разчитайте на форматирането по подразбиране на браузъра или използвайте JavaScript за форматиране на числа и дати според локала на потребителя.
• Символика на цветовете: Имайте предвид, че цветовете могат да имат различно значение в различните култури. Избягвайте използването на цветове, които могат да се считат за обидни или неподходящи в определени култури.
• Езикова поддръжка: Уверете се, че вашите потребителски свойства работят правилно с различни езици. Тествайте уебсайта си с различни езици, за да идентифицирате всякакви потенциални проблеми.

Бъдещето на потребителските свойства на CSS и правилото @property

Правилото @property представлява значителна стъпка напред в еволюцията на CSS. Тъй като поддръжката от браузърите продължава да се подобрява, можем да очакваме да видим още по-иновативни приложения на тази мощна функция. В бъдеще може да видим добавянето на нови стойности за синтаксис към правилото @property, за да се поддържат по-сложни типове данни, като масиви и обекти. Може също да видим по-добра интеграция с JavaScript, което ще позволи на разработчиците динамично да създават и манипулират потребителски свойства по време на изпълнение.

Комбинацията от потребителски свойства и правилото @property проправя пътя за по-модулна, лесна за поддръжка и мощна CSS архитектура. Възприемайки тези функции, разработчиците могат да създават по-сложни и ангажиращи уеб изживявания, които са достъпни за потребители по целия свят.

Заключение

Правилото @property дава възможност на уеб разработчиците да дефинират типове на потребителски свойства, отключвайки нови възможности за анимации, теми и цялостна CSS архитектура. Като разбирате неговия синтаксис, възможности и най-добри практики, можете да използвате тази мощна функция, за да създавате по-стабилни, лесни за поддръжка и визуално привлекателни уеб приложения. Тъй като поддръжката от браузърите продължава да расте, правилото @property несъмнено ще се превърне в основен инструмент в арсенала на модерния уеб разработчик. Прегърнете тази технология, експериментирайте с нейните възможности и отключете пълния потенциал на потребителските свойства на CSS.

Допълнителна информация

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1